import {
  themes,
  engines,
  delEngine,
  editEngine,
  addEngine,
  moveEngine,
  exportEngines,
  checkEngine,
  importEngines,
  resetEngines,
} from "../engines";
import {
  downText,
  copyText,
  stopPropagation,
  importData,
  checkKey,
} from "../utilities";
import { Trash2, ChevronsUp, ChevronsDown } from "lucide-preact";
import EngineCode from "./EngineCode";

const EnginesPage = () => (
  <>
    <div class="*:btn-soft *:btn-sm flex w-full justify-between p-1">
      <button
        type="button"
        class="btn btn-secondary"
        onClick={() => {
          importData(
            (data) =>
              !Array.isArray(data) ||
              !checkKey(data[0], ["name", "url", "theme"], "checked"),
            importEngines,
          );
        }}
      >
        导入 json
      </button>
      <button
        type="button"
        class="btn btn-warning"
        onClick={() => {
          resetEngines();
        }}
      >
        重置
      </button>
      <button
        type="button"
        class="btn btn-success"
        onClick={() => {
          addEngine();
        }}
      >
        新建引擎
      </button>
    </div>
    <div class="*:btn-soft *:btn-sm flex w-full justify-between p-1">
      <button
        type="button"
        class="btn btn-info"
        onClick={() => {
          downText(JSON.stringify(engines.value, void 0, 2), "搜索引擎.json");
        }}
      >
        导出 json (可导入)
      </button>
      <button
        type="button"
        class="btn btn-info"
        onClick={() => {
          downText(exportEngines(), "搜索引擎.txt");
        }}
      >
        导出 txt (人读)
      </button>
    </div>
    <div class="h-max w-full">
      {engines.value.map((engine) => (
        <button
          class={`card card-xs m-auto my-2 w-[70vw] text-center ${engine.checked ? `inset-ring-2 ${themes[engine.theme][4]}` : ""}`}
          key={engine.name}
          onClick={() => {
            checkEngine(engine.name, true);
          }}
        >
          <div class="card-actions w-full justify-end p-2">
            <div class="join *:btn-soft *:btn-sm">
              <button
                class={`btn ${themes[engine.theme][0]} join-item`}
                onClick={(event) => {
                  stopPropagation(event);
                  moveEngine(engine.name, true);
                }}
              >
                <ChevronsUp />
              </button>
              <button
                class={`btn ${themes[engine.theme][0]} join-item`}
                onClick={(event) => {
                  stopPropagation(event);
                  moveEngine(engine.name, false);
                }}
              >
                <ChevronsDown />
              </button>
              <button
                class={`btn ${themes[engine.theme][0]} join-item`}
                onClick={(event) => {
                  stopPropagation(event);
                  delEngine(engine.name);
                }}
              >
                <Trash2 />
              </button>
            </div>
          </div>
          <div class="card-body m-auto place-items-center text-center">
            <button
              class="inline appearance-none"
              onClick={(event) => {
                stopPropagation(event);
                copyText(engine.name);
              }}
            >
              <h2 class={`card-title ${themes[engine.theme][3]}`}>
                {engine.name}
              </h2>
            </button>
            <p>
              <EngineCode eurl={engine.url} theme={themes[engine.theme][3]} />
            </p>
            <p>
              <select
                value={engine.theme}
                class={`select select-sm ${themes[engine.theme][1]}`}
                onClick={stopPropagation}
                onChange={(event) => {
                  editEngine(engine.name, "theme", event.target.value);
                }}
              >
                {Object.keys(themes).map((theme) => (
                  <option key={theme}>{theme}</option>
                ))}
              </select>
            </p>
            <div class="card-actions *:btn-soft *:btn-sm justify-between">
              <button
                class={`btn ${themes[engine.theme][0]}`}
                onClick={(event) => {
                  stopPropagation(event);
                  const value = prompt("填写引擎名称", engine.name);
                  if (value) editEngine(engine.name, "name", value);
                }}
              >
                修改名称
              </button>
              <button
                class={`btn ${themes[engine.theme][0]}`}
                onClick={(event) => {
                  stopPropagation(event);
                  const value = prompt("填写引擎地址", engine.url);
                  if (value) editEngine(engine.name, "url", value);
                }}
              >
                修改地址
              </button>
            </div>
          </div>
        </button>
      ))}
    </div>
  </>
);

export default EnginesPage;
